<template>
	<view id="near">
		<view class="topInfo">
			<view class="item" v-for="(item,index) in tabList" :key="index">
				<view class="leftIcon" :style="{background:item.color}">
				</view>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="iconNow">
			<view class="top">
				<image src="../../static/icon/nearCar/localNow.png" mode=""></image>
			</view>
			<view class="bot">
				<image src="../../static/icon/nearCar/scan.png" mode=""></image>
			</view>
		</view>
		<view class="equity">
			<!-- 权益免费 -->
			<view class="equity_free">
				<view class="equity_switch">
					<u-switch v-model="freeChecked" active-color="#2CB9A4"></u-switch>
				</view>
				<view class="item">
					权益
				</view>
				<view class="item">
					免费
				</view>
			</view>
			<!-- 可用权益商户 -->
			<view class="equity_commercial">
				<view class="equity_switch">
					<u-switch v-model="freeChecked" active-color="#2CB9A4"></u-switch>
				</view>
				<view class="item">
					可用权
				</view>
				<view class="item">
					益商户
				</view>
			</view>
		</view>
		
		<view class="map_container">
			<map id="myMap" class="map" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
				:markers="markers" @markertap="makertap" scale="10" :show-location="false"></map>
		</view>
		<nearCarShow :showPop="showNearCar" @refuse="refuse" @submit="subNearCar" :title='title' :showqx="false">
		</nearCarShow>
		<equityCarShowvue :showPop="showEquityCar" @refuse="refuse" @submit="subNearCar" :title='title1' :showqx="false">
		</equityCarShowvue>
	</view>
</template>

<script>
	import amapFile from "@/libs/amap-wx.130.js";
	import nearCarShow from "@/components/common/nearCarShow.vue"
	import equityCarShowvue from "@/components/common/equityCarShow.vue"
	var self, mapCtx
	export default {
		components: {
			nearCarShow,
			equityCarShowvue
		},
		data() {
			return {
				showEquityCar:false,
				freeChecked: false,
				showNearCar: false,
				title: '汇融广场洗车点',
				title1: '剩余可用权益商户券（2）',
				key: '0a7e3109fe2a9b39a5e2b854e164614f',
				latitude: '',
				longitude: '',
				firstlat: '',
				firstlng: '',
				local: '',
				distance: '',
				// 标记点
				markers: [],
				range: '',
				circles: [],
				radius: 0,
				amapObject: null,
				keyword: '',
				tips: [],
				show: false,
				tabList: [{
						name: '非运营时间',
						color: '#1F63E1'
					},
					{
						name: '空闲',
						color: '#09BB07'
					},
					{
						name: '忙碌',
						color: '#FF954E'
					},
					{
						name: '维修中',
						color: '#7C7EE3'
					},
					{
						name: '停机',
						color: '#979797'
					}
				]
			}
		},
		onShow() {
			self = this
			mapCtx = wx.createMapContext('myMap')
			self.getAuthorizeInfo()
			self.getLocationInfo()
			// var amaFile = require('../../libs/amap-wx.130.js')
			//2XXBZ-D63C4-FDHU6-XQACW-H56O6-DRBDC
			this.amapObject = new amapFile.AMapWX({
				key: '0a7e3109fe2a9b39a5e2b854e164614f'
			})
		},
		methods: {
			refuse() {
				this.showNearCar = false
				this.showEquityCar =  false
			},
			subNearCar() {

			},
			// 点击标记点
			makertap(e) {
				// var id = e.detail.markerId;
				// console.log(e, '点击了标记点')
				// this.showNearCar = true;
				this.showEquityCar =  true

			},
			// 位置授权
			getAuthorizeInfo() {
				let self = this
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						uni.getLocation({
							success: function(res) {
								console.log("经纬度", res);
								self.latitude = res.latitude
								self.longitude = res.longitude
								self.firstlat = res.latitude,
									self.firstlng = res.longitude
							},
						})
					},
					fail() { // 拒绝授权
						this.openConfirm();
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 获取地理位置
			getLocationInfo(val) {
				var that = this;
				this.amapObject = new amapFile.AMapWX({
					key: '0a7e3109fe2a9b39a5e2b854e164614f'
				})
				let location = ''
				if (val) {
					location = val
				} else {
					location = ''
				}
				// console.log(val)
				this.amapObject.getRegeo({
					iconPath: "",
					location: location,
					success: (res) => {
						console.log(res)
						// 移动到当前位置
						that.toLocation(res)
						that.latitude = res[0].latitude;
						that.longitude = res[0].longitude;
						console.log(res)
						// that.local = res[0].regeocodeData.formatted_address
						that.local = res[0].name
						that.markers = [{
									id: 1,
									iconPath: 'https://dcxt.westts.cn/uploads/20230511/b1b0dbf73a23d7efb2cdd5d8718ee514.jpg',
									latitude: res[0].latitude,
									longitude: res[0].longitude,
									name: 'map',
									width: 50,
									height: 50,
								},
								{
									id: 2,
									iconPath: 'https://dcxt.westts.cn/uploads/20230511/b1b0dbf73a23d7efb2cdd5d8718ee514.jpg',
									latitude: 30.67,
									longitude: 104.06,
									name: 'map',
									width: 50,
									height: 50,
								}
							],
							// 地图半径画圆
							this.circles = [{
								latitude: res[0].latitude,
								longitude: res[0].longitude,
								fillColor: "rgba(255,42,65,0.08)",
								color: "#FF0000",
								radius: 50,
							}, ]
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			toLocation(obj) {
				// 改变地图中心位置
				console.log(obj)
				mapCtx.moveToLocation(obj)
				// 移动标记点并添加动画效果
				mapCtx.translateMarker({
					markerId: 1,
					autoRotate: false,
					duration: 100,
					destination: {
						latitude: obj.latitude,
						longitude: obj.longitude,
					},
					animationEnd() {
						console.log('animation end')
					}
				})
			},
			poitap: function(e) {
				console.log(e, "poitap")
				var obj = e.detail
				self.toLocation(obj)
				console.log(e.detail.name)
				this.local = e.detail.name
				console.log(this.latitude, this.longitude)
				this.latitude = e.detail.latitude
				this.longitude = e.detail.longitude
				return false;
				var distance = this.getDistance(this.firstlat, this.firstlng, e.detail.latitude, e.detail.longitude)
				let points = [this.longitude, this.latitude];
				this.getLocationInfo(points)
				distance = parseInt(distance * 1000);
				if (distance != null && distance > 0) {
					this.range = distance + "米";
					if (distance >= 1000) {
						this.range = (Math.round(distance / 100) / 10).toFixed(1) + "公里";
					}
				}
			},
			getAddress(points) {

			},
			goback() {
				// console.log(this.local)
				// uni.setStorageSync('local', this.local)
				let e = {
					local: this.local,
					latitude: this.latitude,
					longitude: this.longitude,
				}
				uni.$emit('map', e)
				uni.navigateBack()
			},
			// 计算距离
			getDistance: function(lat1, lon1, lat2, lon2) {
				var EARTH_RADIUS = 6378.137; //地球半径
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var radlon1 = lon1 * Math.PI / 180.0;
				var radlon2 = lon2 * Math.PI / 180.0;
				this.latitude = lat2
				this.longitude = lon2
				//差值
				var vLat = radLat1 - radLat2;
				var vLon = radlon1 - radlon2;
				//s就是一个球体上的切面，它的圆心即是球心的一个周长最大的圆。
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(vLat / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) *
					Math.pow(Math.sin(vLon / 2), 2)));
				s = s * EARTH_RADIUS;
				var distance = Math.round(s * 10000) / 10000;
				return distance;
			}
		}
	}
</script>

<style lang="scss" scoped>
	#near {
		
		.iconNow{
			display:flex;
			position: fixed;
			bottom: 50px;
			right: 20px;
			z-index: 1;
			.top{
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			.bot{
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
		.equity {
			position: fixed;
			top: 120rpx;
			right: 50rpx;
			z-index: 1;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			&_free {
				font: 28rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #fff;
				padding: 30rpx;
				color: #2CB9A4;
				border-radius: 30rpx;
				width: 68px;

			}

			&_commercial {
				font: 28rpx;
				width: 100px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #fff;
				padding: 30rpx 50rpx;
				color: #2CB9A4;
				border-radius: 30rpx;
				margin-top: 30rpx;
			}

			&_switch {
				margin-bottom: 15rpx;
			}
		}
	}

	::v-deep .jc-e .u-icon__icon {
		color: #fff !important;
	}

	.topInfo {
		height: 50px;
		display: flex;
		padding-left: 20rpx;
		font-size: 28rpx;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;

			.leftIcon {
				margin-right: 6rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
			}
		}
	}

	.map_container {
		width: 100%;
		overflow: hidden;
		top: 0;
		bottom: 80px;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: calc(100vh - 30px);

		.search {
			width: 90%;
			padding-bottom: 15rpx;
		}

		.map {
			height: auto;
			width: 100%;
		}
	}

	.location {
		width: 95%;
		height: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
		// height: 80px;
		background: #fff;
		padding: 2.5%;
		overflow: hidden;

		.distance {
			color: #4295FA;
			font-size: 12px;
		}
	}
</style>